<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="../dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../dist/bootstrap-icons.css">
  <title>消息提示-多条消息</title>
</head>
<body>
  <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">

    <div class="toast-container">

      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <img src="avatar.png" class="rounded me-2" style="width: 1.25rem;" alt="...">
          <strong class="me-auto">项目讨论</strong>
          <small>1 分钟前</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          Tom 发来一条消息。
        </div>
      </div>

      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <img src="avatar.png" class="rounded me-2" style="width: 1.25rem;" alt="...">
          <strong class="me-auto">项目讨论</strong>
          <small>1 分钟前</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          Tom 发来一条消息。
        </div>
      </div>
      
    </div>
  </div>

  <script src="../dist/js/bootstrap.bundle.min.js"></script>
  <script>
    const list = document.querySelectorAll('.toast');
    Array.prototype.forEach.call(list, function(a){
      let toast = new bootstrap.Toast(a, { autohide: false });
      toast.show()
    })
  </script>
</body>
</html>